<!DOCTYPE html>
<html lang="en">

<head>
    <title>战队PK</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../../css/public.css">
    <style>
        .register_bg {
            position: absolute;
            left: 0;
            top: 0;
            /* bottom: 0; */
            height: 100%;
            ;
            right: 0;
            background: url('../../images/reg/bg.png') center no-repeat;
            background-size: 100% 100%;
            z-index: 1;
            padding-bottom: 5%;
        }

        .home_zhangdui_nav {
            overflow: hidden;
            background: #021349 url('../../images/reg/back.png') 10px center no-repeat;
            background-size: .7rem;
        }

       /* .guese-logo {
            margin-top: 60px;

        }*/

        .team .pk {
            float: left;
            margin-left: 6%;
            background: url(../../images/home/btm_issue.png ) center no-repeat;
        }

        .team .competition {
            float: right;
            margin-right: 6%;
            background: url(../../images/home/btm_challenge.png) center no-repeat;
        }

        .team .pk,
        .team .competition {

            height: 65px;
            width: 40%;
            background-size: 100%;
            border: 0;
        }

        .team button {
            margin-bottom: 3px;
            display: block;
            font-size: 17px;
            color: #1D1104;
            font-weight: 700;
        }

        .addPic {
            position: relative;
            height: 91px;
            width: 91px;
            margin: auto;
            margin-bottom: 20px;
            background: url('../../images/home/photos.png') center no-repeat;
            /* background-size: 100%; */
            border: 0;
            overflow: hidden;
        }

        .addPic img {
            width: 89px;
            height: 89px;


        }

        #thumbnail {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .addtext {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            color: #999BC7;
            font-size: .35rem;
        }

        .picContain {
            height: 100%;
            width: 100%;
            border-radius: 5px;
            overflow: hidden;
        }
        .roomname {
            padding-top: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: .5rem;
            color: #FFB400;
        }
        .pswshow {
            text-align: center;
            font-size: .4rem;
            color: #FFB400;
        }
        .roomid {
            display: none;
        }
        .doCancel {
            letter-spacing: 3px;
            color: #D0C7EF;
        }
    </style>
</head>

<body>

    <div class="register_bg">
        <div class="home_zhangdui_nav">
            <span class="goBack"></span>
            <span>添加截图</span>
        </div>
        <div class="roomname"></div>
        <div class="pswshow"></div>
        <div class="roomid">id</div>
        <div class="guese-logo">
            <img src="../../images/home/bg_home_issue _ailin.png" alt="">

        </div>
        <div>
            <div class="addPic">
                <div class="addtext">添加截图</div>
                <input type="file" class="form-control" id="thumbnail" name="thumbnail">

                <div class="picContain">
                    <img id="picture" src="" alt="">
                </div>

            </div>
        </div>
        <div class="team">
            <button id="winner" class="pk"> 胜利</button>
            <button id="loser" class="competition">失败</button>
            <div class="clear"></div>
        </div>
    </div>
    <script src="../../js/public.js"></script>
    <script>
       $(function () {
            //添加头像
            let warId = localStorage.roomid,
            // let path = window.location.href,
            //     warId = path.split('?')[1].split('=')[1].split('&')[0],
                src,
                image,
                screenshots
            // console.log(warId, picType)

            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }

            $('#thumbnail').change(function () {
                let src = getObjectURL($(this)[0].files[0])
                console.log('ll', src)
                $('#picture').attr('src', src);
                $('.addtext').text('重新添加')
                $('.addtext').css({
                    'bottom': '10px',
                    'color': '#fff'
                })
                $('#picture').css({
                    'border': '1px solid #FFCD29'
                })
                getBase64Image = function (img) {
                    var canvas = document.createElement("canvas");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
                    var dataURL = canvas.toDataURL("image/" + ext);
                    return dataURL;
                }

                image = new Image();
                image.src = src;

                image.onload = function () {
                    screenshots = getBase64Image(image);
                    //胜利
                    $('#winner').click(function () {
                        let result = '';
                        var user_type = localStorage.usertype;
                        // console.log('user_type:' + user_type);
                        if(user_type == 1){
                            result = 1
                        }else{
                            result = 0
                        }
                        
                        $.post(addPicUrl, {
                            screenshots,
                            warId,
                            result
                        }, (res) => {
                            console.log(res)
                            if (res.code == 0) {
                                alert(res.msg)
                                // window.location.href = './home.html'
                            } else {
                                alert(res.msg)
                            }
                        })
                    })
                    //失败
                    $('#loser').click(function () {
                        let result = ''
                        var user_type = localStorage.usertype;
                        // console.log('user_type:' + user_type);
                        if(user_type == 1){
                            result = 0
                        }else{
                            result = 1
                        }

                        $.post(addPicUrl, {
                            screenshots,
                            warId,
                            result
                        }, (res) => {
                            if (res.code == 0) {
                                alert(res.msg)
                                window.location.href = './home.html'
                            } else {
                                alert(res.msg)
                            }
                        })
                    })
                }
            });
        })
       $(function() {
            let path  = window.location.href;
            fdRoomNo  = path.split('?')[1].split('=')[1];
            $('.roomname').text(fdRoomNo);
            $('.roomid').text(localStorage.roomid);
            let roompsw = localStorage.roompsw; 
            let user_type = localStorage.usertype;
            if(user_type ==1 &&roompsw == 1){
                $('.pswshow').text('密码:'+localStorage.pswnum)
            }
       })
    </script>
</body>

</html>